﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>在线考试</title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <script src="../Scripts/jquery-3.3.1.js"></script>
    <script src="../layui/layui.js"></script>
    <style>
       

        .header {
            background-color: #fff;
            margin: 20px;
            position: fixed;
            top: 0px;
            right: 0px;
            /*z-index: 999;*/
            width: 73%;
            height: 58px;
            float: right;
            line-height: 58px;
            border: 1px solid rgb(222, 226, 222);
            box-shadow: 0 0 10px rgb(177, 182, 177);

        }

        .content {
            margin-left: 20px;
            margin-right: 20px;
        }

        .sheet {
            width: 23%;
            height: 680px;
            float: left;
            margin-top: 0px;
            box-shadow: 0 0 10px rgb(177, 182, 177);
            position: fixed;
            top: 20px;
        }

        .sheet .sheet-item span {
            font-size: 16px;
            line-height: 30px;
        }

        .sheet .sheet-item {
            background-color: #eee;
            text-align: center;
            margin-top: 10px;
        }

        .sheet .sheet-number .noAnswer {
            background-color: #f4f4f5;
            border-color: #e9e9eb;
            color: #909399;
            line-height: 30px;
            padding: 4px 8px;
            margin-left: 20px;
            border-radius: 5px;
            display: inline-block;
            width: 20px;
            margin-top: 4px;
            text-align: center;
        }

        .sheet .sheet-number .hasAnswer {
            background-color: #e7faf0;
            border-color: #d0f5e0;
            color: #13ce66;
            line-height: 30px;
            padding: 4px 8px;
            margin-left: 20px;
            border-radius: 5px;
            display: inline-block;
            width: 20px;
            margin-top: 4px;
            text-align: center;
        }

        .sheet .sheet-number {
            margin-top: 10px;
            font-size: 16px;
            
        }

        .answer {
            position: relative;
            top: 10px;
            right: 0px;
            width: 75%;
            background-color: #fff;
            float: right;
            margin-top: 100px;
            border: 1px solid rgb(222, 226, 222);
            box-shadow: 0 0 10px rgb(177, 182, 177);

            height: 600px;
            overflow: auto;
        }

        .answer .titleInfo {
            font-size: 22px;
            background-color: #edf1ed5a;
            padding: 10px;
        }

        .submit1 {
            margin: 10px 20px;
            float: right;
        }

        .headerText {
            padding: 20px;
            font-size: 24px;
        }

        .answerRadio {
            margin-top: 0.5em;
            margin-right: 0.5em;
            border: 1px solid rgb(207, 206, 211);
        }

        .answerRadio input[type="radio"] {
            display: none;
        }


        .option {
            font-size: 18px;
            margin-top: 15px;
            margin-left: 30px;
            width: 700px;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            padding: 10px;
            margin-bottom: 20px;
            /* box-shadow:2px 2px 10px #000; */
        }

        .answerBtn {
            margin-left: 60px;
            margin-top: 30px;
        }

        .answerBtn button {
            padding: 0 30px;
            margin-left: 50px;
            margin-top: 20px;
        }

        .title {
            margin: 30px;
            font-size: 20px;
        }

        /*多选题样式*/
        .answerMutil input[type="checkbox"] {
            display: none;
        }

        .answerMutil {
            margin-top: 0.5em;
            margin-right: 0.5em;
            border: 1px solid rgb(207, 206, 211);
        }

        /*判断题样式*/
        .answerJudge input[type="radio"] {
            display: none;
        }

        .answerJudge {
            margin-top: 0.5em;
            margin-right: 0.5em;
            border: 1px solid rgb(207, 206, 211);
        }

        /*解答题*/


        .answerAnswer {
            margin-top: 0.5em;
            margin-right: 0.5em;
            border: 1px solid rgb(207, 206, 211);
        }

        /* Demos - Scrollbar 6 */

        .answer::-webkit-scrollbar-thumb {
            background-color: #13ce66;
            border-radius: 5px;
        }

        .answer::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        .answer::-webkit-scrollbar-track {
            background-color: rgba(0, 0, 0, 0.2);
            box-shadow: inset 0px 0px 0px 2px #e7faf0;
            -webkit-box-shadow: inset 0px 0px 0px 2px #e7faf0;
            -moz-box-shadow: inset 0px 0px 0px 2px #e7faf0;
            -o-box-shadow: inset 0px 0px 0px 2px #e7faf0;
            border-radius: 5px;
        }
    </style>


</head>

<body>
    <div class="header">
        <div>
            <span class="headerText">请认真答卷</span>
            <button type="button" class="layui-btn submit1" id="submit1"><i class="layui-icon layui-icon-release"></i> 提交</button>
        </div>
    </div>
    <div class="content">
        <!-- 答题卡 -->
        <div class="sheet">
            <div class="sheet-item">
                <span>答题卡</span>
            </div>
            <div class="sheet-number">
                <span class="noAnswer" style="width: 50px;">未作答</span>
                <span class="hasAnswer" style="width: 50px;">已作答</span>
            </div>

            <div class="sheet-item">
                <span>单选题</span>
            </div>
            <div class="sheet-number" id="radio_sheet">
            </div>
            <div class="sheet-item">
                <span>多选题</span>
            </div>
            <div class="sheet-number" id="mutil_sheet">
            </div>
            <div class="sheet-item">
                <span>判断题</span>

            </div>
            <div class="sheet-number" id="judge_sheet">

            </div>
            <div class="sheet-item">
                <span>解答题</span>

            </div>
            <div class="sheet-number" id="answer_sheet">

            </div>
        </div>
        <!-- 答题区 -->

        <div class="answer" id="answer">
           
            <!--<div class='radioQuestion' style="border: 1px solid rgb(236, 235, 240);">
                <p class='title'>1.Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error repudiandae minima
                    vitae accusamus. Eligendi sapiente cumque non, officiis, velit inventore aut magnam tempore dolore
                    iusto quod pariatur repellendus ipsum amet.</p>
                <div class='answerRadio'>
                    <div class='option'>
                        <input type='radio' name='radio_test_1' value='A' id='radio_test_1'><label
                            for='radio_test_1'>p_1vcse, rem! Lorem</label>
                    </div>
                    <div class='option'>
                        <input type='radio' name='radio_test_1' value='B' id='radio_test_2'><label
                            for='radio_test_2'>p_2</label>
                    </div>

                    <div class='option'>
                        <input type='radio' name='radio_test_1' value='C' id='radio_test_3'><label
                            for='radio_test_3'>p_3</label>
                    </div>
                    <div class='option'>
                        <input type='radio' name='radio_test_1' value='D' id='radio_test_4'><label
                            for='radio_test_4'>p_4</label>
                    </div>
                </div>

            </div>-->
        </div>

    </div>
    <script>
        layui.use(['form','layer','jquery'], function () {
            var form = layui.form,
            $ = layui.jquery;

            var test_question_id = window.location.search.substring(18);//获取试卷号

            
            var itemNum = 0;//题号
            //单选框函数
            function clickOption() {
                $(".answer .judgeQuestion  .option").click(function () {
                    $(this).children("input[type='radio']").prop("checked", true);
                    $(this).css({ border: '1px solid #409eff' });
                    $(this).siblings().css({ border: '1px solid #dcdfe6' });
                    var name = $(this).children("input[type='radio']")[0].name;
                    var sheet = $(".sheet .sheet-number span[name='" + name + "']");
                    sheet.removeClass('noAnswer');
                    sheet.addClass('hasAnswer');
                })
            }

            //单选题
            $.ajax({
                url: './generateRadio.aspx',
                dataType: 'json',
                data: {
                    'test_question_id': test_question_id
                },//需要更改
                success: function (res) {
                    console.log(res.data);
                    var data = res.data;
                    //加题目
                    var titleHtml = "<p class='title titleInfo'><strong>一、单选题</strong></p>";
                    $("#answer").append(titleHtml);
                    for (var i = 0; i < data.length; i++) {
                        itemNum++;
                        var itemStr = itemNum.toString();
                        //添加html
                        var html = "<div class='radioQuestion'> <p class='title' name ='" + data[i].radio_question_id + "'>";
                        var title = "<strong>" + itemStr + "</strong> " + ". " + data[i].radio_question_title;
                        var title_end = "</p><div class='answerRadio'>";
                        //选项radio类名
                        var itemStr = itemNum.toString();
                        var option_a = "<div class='option'><input type='radio' name='radio_test_" + itemStr + "' value='A' id='radio_test_" + itemStr + "_1'>"
                            + "<label for='radio_test_" + itemStr + "_1'>" + "A. " + data[i].option_a + "</label></div>";
                        var option_b = "<div class='option'><input type='radio' name='radio_test_" + itemStr + "' value='B' id='radio_test_" + itemStr + "_2'>"
                            + "<label for='radio_test_" + itemStr + "_2'>" + "B. " + data[i].option_b + "</label></div>";
                        var option_c = "<div class='option'><input type='radio' name='radio_test_" + itemStr + "' value='C' id='radio_test_" + itemStr + "_3'>"
                            + "<label for='radio_test_" + itemStr + "_3'>" + "C. " + data[i].option_c + "</label></div>";
                        var option_d = "<div class='option'><input type='radio' name='radio_test_" + itemStr + "' value='D' id='radio_test_" + itemStr + "_4'>"
                            + "<label for='radio_test_" + itemStr + "_4'>" + "D. " + data[i].option_d + "</label></div>";

                        var html_end = "</div> </div>";
                        html = html + title + title_end + option_a + option_b + option_c + option_d + html_end;
                        $("#answer").append(html);

                        //生成答题卡框，并且和answer选项联系在一起
                        var sheet_html = "<span class='noAnswer' " + "name = 'radio_test_" + itemStr + "'>" + itemStr + "</span>";
                        $("#radio_sheet").append(sheet_html);

                    }
                    clickOption();
                    //调用判断题
                    fun1();


                }

            });
            function clickOption() {
                $(".answer .radioQuestion  .option").click(function () {
                    $(this).children("input[type='radio']").prop("checked", true);
                    $(this).css({ border: '1px solid #409eff' });
                    $(this).siblings().css({ border: '1px solid #dcdfe6' });
                    var name = $(this).children("input[type='radio']")[0].name;
                    var sheet = $(".sheet .sheet-number span[name='" + name + "']");
                    sheet.removeClass('noAnswer');
                    sheet.addClass('hasAnswer');
                    //获取答案保存到答题卡

                })
            }
            //多选题
            function fun1() {
                $.ajax({
                    url: './generateMutil.aspx',
                    dataType: 'json',
                    data: {
                        'test_question_id': test_question_id
                    },//需要更改
                    success: function (res) {
                        console.log(res.data);
                        var data = res.data;
                        console.log(res.data);
                        //加题目
                        var titleHtml = "<p class='title titleInfo' ><strong>二、多选题（错选，少选不得分)</strong></p>";
                        $("#answer").append(titleHtml);
                        for (var i = 0; i < data.length; i++) {
                            itemNum++;
                            //添加html
                            var itemStr = itemNum.toString();
                            var html = "<div class='mutilQuestion'> <p class='title' name ='" + data[i].mutil_question_id + "'>";
                            var title = "<strong>" + itemStr + "</strong> " + ". " + data[i].mutil_question_title;
                            var title_end = "</p><div class='answerMutil'>";
                            //选项mutil类名

                            var option_a = "<div class='option'><input type='checkbox' name='mutil_test_" + itemStr + "' value='A' id='mutil_test_" + itemStr + "_1'>"
                                + "<label for='mutil_test_" + itemStr + "_1'>" + "A. " + data[i].option_a + "</label></div>";
                            var option_b = "<div class='option'><input type='checkbox' name='mutil_test_" + itemStr + "' value='B' id='mutil_test_" + itemStr + "_2'>"
                                + "<label for='mutil_test_" + itemStr + "_2'>" + "B. " + data[i].option_b + "</label></div>";
                            var option_c = "<div class='option'><input type='checkbox' name='mutil_test_" + itemStr + "' value='C' id='mutil_test_" + itemStr + "_3'>"
                                + "<label for='mutil_test_" + itemStr + "_3'>" + "C. " + data[i].option_c + "</label></div>";
                            var option_d = "<div class='option'><input type='checkbox' name='mutil_test_" + itemStr + "' value='D' id='mutil_test_" + itemStr + "_4'>"
                                + "<label for='mutil_test_" + itemStr + "_4'>" + "D. " + data[i].option_d + "</label></div>";

                            var html_end = "</div> </div>";
                            html = html + title + title_end + option_a + option_b + option_c + option_d + html_end;
                            $("#answer").append(html);

                            //生成答题卡框，并且和answer选项联系在一起
                            var sheet_html = "<span class='noAnswer' " + "name = 'mutil_test_" + itemStr + "'>" + itemStr + "</span>";
                            $("#mutil_sheet").append(sheet_html);

                        }
                        clickOption1();
                        fun2();

                    }
                });
            }
            function clickOption1() {
                $(".answer .mutilQuestion  .option").click(function () {


                    //获取答案保存到答题卡
                    var item = $(this).children("input[type='checkbox']");

                    if (item[0].checked) {
                        item.prop("checked", false);
                        $(this).css({ border: '1px solid #dcdfe6' });
                    }
                    else {
                        item.prop("checked", true);
                        $(this).css({ border: '1px solid #409eff' });
                    }

                    var a = $("input[type='checkbox'][name='mutil_test_1']");
                    var name = item[0].name;
                    //判断是否已选
                    var checkbox = $("input[type='checkbox'][name='" + item[0].name + "']");
                    var isflag = 0;
                    for (var i = 0; i < checkbox.length; i++) {
                        if (checkbox[i].checked) {
                            isflag = 1;
                        }
                    }
                    var sheet = $(".sheet .sheet-number span[name='" + item[0].name + "']");
                    if (isflag == 1) {
                        sheet.removeClass('noAnswer');
                        sheet.addClass('hasAnswer');
                    }
                    else {
                        sheet.removeClass('hasAnswer');
                        sheet.addClass('noAnswer');
                    }

                })
            }
            //判断题
            function fun2() {
                $.ajax({
                    url: './generateJudge.aspx',
                    dataType: 'json',
                    data: {
                        'test_question_id': test_question_id
                    },//需要更改
                    success: function (res) {
                        console.log(res.data);
                        var data = res.data;
                        //加题目
                        var titleHtml = "<p class='title titleInfo' ><strong>三、判断题</strong></p>";
                        $("#answer").append(titleHtml);
                        for (var i = 0; i < data.length; i++) {
                            itemNum++;
                            var itemStr = itemNum.toString();
                            //添加html
                            var html = "<div class='judgeQuestion'> <p class='title' name ='" + data[i].judge_question_id + "'>";
                            var title = "<strong>"+itemStr +"</strong> "+". " + data[i].judge_question_title;
                            var title_end = "</p><div class='answerJudge'>";
                            //选项judge类名
                            var itemStr = itemNum.toString();
                            var option_true = "<div class='option'><input type='radio' name='judge_test_" + itemStr + "' value='true' id='judge_test_" + itemStr + "_1'>"
                                + "<label for='judge_test_" + itemStr + "_1'>" + "对. " + "</label></div>";
                            var option_false = "<div class='option'><input type='radio' name='judge_test_" + itemStr + "' value='false' id='judge_test_" + itemStr + "_2'>"
                                + "<label for='judge_test_" + itemStr + "_2'>" + "错. " + "</label></div>";

                            var html_end = "</div> </div>";
                            html = html + title + title_end + option_true + option_false + html_end;
                            $("#answer").append(html);

                            //生成答题卡框，并且和answer选项联系在一起
                            var sheet_html = "<span class='noAnswer' " + "name = 'judge_test_" + itemStr + "'>" + itemStr + "</span>";
                            $("#judge_sheet").append(sheet_html);

                        }
                        clickOption3();
                        fun3();
                    }
                });


            }
            //多选框函数
            function clickOption3() {
                $(".answer  .answerJudge .option").click(function () {
                    $(this).children("input[type='radio']").prop("checked", true);
                    $(this).css({ border: '1px solid #409eff' });
                    $(this).siblings().css({ border: '1px solid #dcdfe6' });
                    var name = $(this).children("input[type='radio']")[0].name;
                    var sheet = $(".sheet .sheet-number span[name='" + name + "']");
                    sheet.removeClass('noAnswer');
                    sheet.addClass('hasAnswer');
                })
            }

            //解答题
            function fun3() {
                $.ajax({
                    url: './generateAnswer.aspx',
                    dataType: 'json',
                    data: {
                        'test_question_id': test_question_id
                    },//需要更改
                    success: function (res) {
                        console.log(res.data);
                        var data = res.data;
                        //加题目
                        var titleHtml = "<p class='title titleInfo' ><strong>四、解答题</strong></p>";
                        $("#answer").append(titleHtml);
                        for (var i = 0; i < data.length; i++) {
                            itemNum++;
                            var itemStr = itemNum.toString();
                            //添加html
                            var html = "<div class='answerQuestion'> <p class='title' name ='" + data[i].answer_question_id + "'>";
                            var title = "<strong>" + itemStr + "</strong> " + ". " + data[i].answer_question_title;
                            var title_end = "</p><div class='answerAnswer'>";
                            //选项answer类名
                            var itemStr = itemNum.toString();
                            var text = "<div class='layui-form-item layui-form-text'><label class='layui-form-label'>答案：</label><div class='layui-input-block'>"
                                + "<textarea placeholder='请输入内容' class='layui-textarea'name ='answer_test_" + itemNum + "'></textarea></div>";

                            var html_end = "</div> </div></div>";
                            html = html + title + title_end + text + html_end;
                            $("#answer").append(html);

                            //生成答题卡框，并且和answer选项联系在一起
                            var sheet_html = "<span class='noAnswer' " + "name = 'answer_test_" + itemStr + "'>" + itemStr + "</span>";
                            $("#answer_sheet").append(sheet_html);

                        }
                        clickOption2();

                    }
                })
            }
            function clickOption2() {

                $(".answerAnswer textarea").change(function () {
                    var sheet = $(".sheet .sheet-number span[name='" + $(this)[0].name + "']");
                    if ($(this)[0].value == "") {
                        sheet.removeClass('hasAnswer');
                        sheet.addClass('noAnswer');
                    }
                    else {
                        sheet.removeClass('noAnswer');
                        sheet.addClass('hasAnswer');
                    }
                })
            }

            $("#submit1").click(function () {


                var radioStr = "";
                var item = "";
                var noAnswerNumber = "";
                var radioItems = $(".radioQuestion input[type='radio']");
                for (var i = 0; i < (radioItems.length / 4); i++) {
                    var j = 0;
                    for (j = 0; j < 4; j++) {
                        item = radioItems[i * 4 + j];
                        var a = item.checked;
                        if (item.checked) {
                            var option = item.value;//你选的答案
                            var question_id = $(item).parent().parent().siblings('p').attr('name');//题号
                            radioStr = radioStr + question_id + "#" + option + "`";
                            break;
                        }

                    }
                    if (j == 4) {
                        //没有选择
                        var question_id = $(item).parent().parent().siblings('p').attr('name');//题号
                        radioStr = radioStr + question_id + "#" + "`";
                        //提醒用户
                        var str = $(item).attr('name');
                        noAnswerNumber = noAnswerNumber + (str.substring(11, str.length)) + ',';//radio_test_1" 
                    }
                }



                //多选题
                var mutilStr = "";
                var item = "";
                var mutilItems = $(".mutilQuestion input[type='checkbox']");
                for (var i = 0; i < (mutilItems.length / 4); i++) {
                    var flag = 0;
                    var mutilFlag = 0;//多选标志
                    for (var j = 0; j < 4; j++) {
                        item = mutilItems[i * 4 + j];
                        var a = item.checked;
                        if (item.checked) {//第一次要题号
                            if (mutilFlag == 0) {
                                var option = item.value;//你选的答案
                                var question_id = $(item).parent().parent().siblings('p').attr('name');//题号
                                mutilStr = mutilStr + question_id + "#" + option;
                                flag = 1;
                                mutilFlag = 1;
                            }
                            else {
                                var option = item.value;
                                mutilStr = mutilStr + option;
                            }

                        }


                    }

                    if (flag == 0) {
                        //没有选择
                        var question_id = $(item).parent().parent().siblings('p').attr('name');//题号
                        mutilStr = mutilStr + question_id + "#" + "`";
                        //提醒用户
                        var str = $(item).attr('name');
                        noAnswerNumber = noAnswerNumber + (str.substring(11, str.length)) + ',';//radio_test_1" 
                    }
                    else {
                        mutilStr = mutilStr + "`";
                    }
                }


                //判断题
                var judgeStr = "";
                var item = "";
                var judgeItems = $(".judgeQuestion input[type='radio']");
                for (var i = 0; i < (judgeItems.length / 2); i++) {
                    var j = 0;
                    for (j = 0; j < 2; j++) {
                        item = judgeItems[i * 2 + j];
                        var a = item.checked;
                        if (item.checked) {
                            var option = item.value;//你选的答案
                            var question_id = $(item).parent().parent().siblings('p').attr('name');//题号
                            judgeStr = judgeStr + question_id + "#" + option + "`";
                            break;
                        }

                    }
                    if (j == 2) {
                        //没有选择
                        var question_id = $(item).parent().parent().siblings('p').attr('name');//题号
                        judgeStr = judgeStr + question_id + "#" + "`";
                        //提醒用户
                        var str = $(item).attr('name');
                        noAnswerNumber = noAnswerNumber + (str.substring(11, str.length)) + ',';//judge_test_1" 
                    }
                }
                


                //解答题
                var answerStr = "";
                var item = "";
                var answerItems = $(".answerQuestion textarea");
                for (var i = 0; i < answerItems.length; i++) {
                    item = answerItems[i];
                    if (item.value != "") {
                        var option = item.value;//你选的答案
                        var question_id = $(item).parent().parent().parent().siblings('p').attr('name');//题号
                        answerStr = answerStr + question_id + "#" + option + "`";
                    }
                    else {
                        //没有选择
                        var question_id = $(item).parent().parent().parent().siblings('p').attr('name');//题号
                        answerStr = answerStr + question_id + "#" + "`";
                        //提醒用户
                        var str = $(item).attr('name');
                        noAnswerNumber = noAnswerNumber + (str.substring(11, str.length)) + ',';//answer_test_1" 
                    }
                }
                var submit_flag = 0;
                noAnswerNumber = noAnswerNumber.substring(0, noAnswerNumber.length - 1);
                if (noAnswerNumber != "")
                {
                    layer.confirm('你有以下题未完成:' + noAnswerNumber + ' \n 你确定要提交试卷吗！！！', {
                        btn: ['确定', '取消'] //可以无限个按钮
                        , btn2: function (index, layero)
                        {
                            //按钮【按钮二】的回调

                            return true;
                        }
                    }, function (index)
                    {
                        //按钮【按钮一】的回调
                        SubmitAnswer();
                        layer.close(index);
                    })
                }
                else
                {
                    layer.confirm('确定提交试卷吗？', {
                        btn: ['确定', '取消'] //可以无限个按钮
                        , btn2: function (index, layero)
                        {
                            //按钮【按钮二】的回调

                            return true;
                        }
                    }, function (index)
                    {
                        //按钮【按钮一】的回调
                        SubmitAnswer();
                        layer.close(index);

                    })
                }
                //console.log(radioStr + mutilStr + judgeStr + answerStr);
                //提交答案
                
                function SubmitAnswer()
                {
                    
                    $.ajax({
                        url: './submitAnswer.aspx',
                        method: 'post',
                        data: { 'radioStr': radioStr, 'mutilStr': mutilStr, 'judgeStr': judgeStr, 'answerStr': answerStr, 'test_question_id': test_question_id },
                        dataType: 'text',
                        success: function (res)
                        {
                            if (res >= 0)
                            {
                                var score = Number(res);
                                if (score >= 90)
                                {
                                    layer.alert('恭喜你，得到' + score + '分', { icon: 6 });
                                }
                                else if (score >= 60)
                                {
                                    layer.alert('恭喜你，得到' + score + '分', { icon: 6 });
                                }
                                else
                                {
                                    layer.alert('希望你下次努力，你得到' + score + '分', { icon: 2 });
                                }
                                //防止再次提交答案
                                $("#submit1").addClass("layui-btn-disabled").attr("disabled",true);//禁止提交
                            }
                            else
                            {
                                alert('提交失败');
                            }

                        }
                        , error: function (res)
                        {
                            alert('提交失败');
                        }
                    });
                }
            });
        });
    </script>
</body>

</html>